<template>
  <view class="navlist">
    <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <image :src="$host+item" style="width:100%;"></image>
      </swiper-item>
    </swiper>
    <div class="ul">
      <p class="title">最低保障</p>
      <navigator url="./index?index=1" class="li" open-type="navigate">
        <image src="/static/img/bq1.png"></image>
        <text>农村低保</text>
      </navigator>
      <navigator url="./index?index=2" class="li" open-type="navigate">
        <image src="/static/img/bq2.png"></image>
        <text>城市低保</text>
      </navigator>
      <navigator url="./index?index=5" class="li" open-type="navigate">
        <image src="/static/img/bq3.png"></image>
        <text>兜底保障</text>
      </navigator>
    </div>
    <div class="ul">
      <p class="title">特困供养</p>
      <navigator url="./index?index=3" class="li" open-type="navigate">
        <image src="/static/img/wj3.png"></image>
        <text>农村特困</text>
      </navigator>
      <navigator url="./index?index=4" class="li" open-type="navigate">
        <image src="/static/img/wj4.png"></image>
        <text>城市特困</text>
      </navigator>
    </div>
    <div class="ul">
      <p class="title">查询、验证</p>
      <navigator url="../apply/applyQuery" class="li" open-type="navigate">
        <image src="/static/img/rl.png"></image>
        <text>人脸验证</text>
      </navigator>
      <navigator url="../query/index" class="li" open-type="navigate">
        <image src="/static/img/ss.png"></image>
        <text>进度查询</text>
      </navigator>
    </div>
  </view>
</template>

<script>
  import QQMapWX from '../../utils/qqmap-wx-jssdk.min.js';
  let qqmapsdk = new QQMapWX({
    key: 'BU6BZ-MK4KO-V3TW6-S5GLJ-HCTQF-PEF35'
  });
  export default {
    data() {
      return {
        $host: this.$host,
        bannerList: [],
        indicatorDots: true,
        autoplay: false,
        interval: 2000,
        duration: 500
      }
    },
    onLoad() {
      let that = this;
      this.GetBanner()
      // 定位
      uni.getLocation({
          type: 'wgs84',
          altitude: true,
          success: function (res) {
            that.getLocal(res.latitude, res.longitude)
          }
      });
      // 取oppid
      uni.login({
			  provider: 'weixin',
			  success: function (res) {
          that.goEditallowances(res.code)
        }
      })
    },
    methods: {
      // 方法
      GetBanner () {
        this.$http.get('GetBanner').then(res => {
          this.bannerList = res.data.banner;
        })
      },
      // 获取当前地理位置
      getLocal(latitude, longitude) {
        let vm = this;
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (res) {
            let location = {
              address: res.result.address,
              latitude: latitude,
              longitude: longitude
            }
            uni.setStorage({//缓存用户登陆状态
              key: 'location',  
              data: location
					  })
          },
          fail: function (res) {
            console.log(res);
          }
        });
      },
      goEditallowances (code) {
        let that = this
        this.$http.get('code2Session', {params: {code: code}}).then(res => {
          uni.setStorage({//缓存用户登陆状态
              key: 'openid',  
              data: res.data.openid
          })
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .navlist{
    background-color: #f0eeee;
    min-height: 100vh;
    .ul{
      background-color: #fff;
      display: flex;
      flex-wrap: wrap;
      .title{
        width: 100%;
        padding: 30upx;
        font-weight: bold;
        background-color: #f0eeee;
      }
    }
    .li{
      text-align: center;
      padding: 30upx;
      box-sizing: border-box;
      width: 33%;
	  font-size: 32upx;
      image{
        width: 64upx;
        height: 64upx;
        margin-right: 20upx;
        display: block;
        margin: 0 auto;
        // vertical-align: middle;
      }
      text{
		  padding-top: 6upx;
        display: block;
        // vertical-align: middle;
      }
    }
  }
</style>
